<template>
    <div class="pagination">
        
        
        <van-button 
            :disabled="currentPage === 1"
            @click="$emit('page-change', currentPage - 1)"
            size="small"
            class="page-btn"
        >
            上一页
        </van-button>

        <span class="page-info">
            当前: {{ currentPage }} / {{ totalPages }}页 
            {{ total ? `总数: ${total}条` : '' }}

        </span>
        
        <van-button 
            :disabled="currentPage === totalPages"
            @click="$emit('page-change', currentPage + 1)"
            size="small"
            class="page-btn"
        >
            下一页
        </van-button>

        <van-button 
            :disabled="currentPage === 1"
            @click="$emit('page-change', 1)"
            size="small"
            class="page-btn"
        >
            首页
        </van-button>
        
        <van-button 
            :disabled="currentPage === totalPages"
            @click="$emit('page-change', totalPages)"
            size="small"
            class="page-btn"
        >
            末页
        </van-button>
    </div>
</template>

<script setup>
import { Button as VanButton } from 'vant';

const props = defineProps({
    currentPage: {
        type: Number,
        required: true
    },
    totalPages: {
        type: Number,
        required: true
    },
    total: {
        type: Number,
        required: false
    }
});

const emit = defineEmits(['page-change']);

const goToPage = (page) => {
    if (page < 1 || page > props.totalPages) return;
    emit('page-change', page);
};
</script>

<style scoped>
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 8px;
    flex-wrap: nowrap;
}

.page-info {
    padding: 0 10px;
    color: #666;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

.page-btn {
    min-width: auto !important;
    padding: 0 10px !important;
    flex-shrink: 0;
}

:deep(.van-button) {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}

:deep(.van-button--disabled) {
    opacity: 0.5;
}

@media (max-width: 600px) {
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-info {
        order: 1;
        width: 100%;
        margin: 4px 0;
        padding: 0;
    }

    .page-btn {
        flex-grow: 1;
        min-width: 0 !important;
        font-size: 13px !important;
    }
    
    .pagination > .van-button:nth-child(1),
    .pagination > .van-button:nth-child(2)
    {
        order: 0;
    }
    
    .pagination > .van-button:nth-child(4),
    .pagination > .van-button:nth-child(5)
    {
        order: 2;
    }
}
</style> 